<template lang="html">
    <div
      class="x-bar"
      :id="chartId"
      :option='option'
      >
      </div>
</template>

<script>
import {formatNum} from '../../../util/tool'
export default {
  props : {
    chartId : {
      type : String,
    },
    title : {
      type : String,
    },
    options : {
      type : Object,
    }
  },
  data(){
    return {
      chart : '',
      option : {
          grid: {
              left: '6%',
              right: '8%',
              top : '21%',
              bottom: '0%',
              containLabel: true
          },
          tooltip : {
            show : true,
            trigger: 'axis',
            showContent : true
          },
          xAxis: {
              type: 'category',
              // name : this.options.xName,//传入数据
              boundaryGap : false,
              nameTextStyle : {
                color : '#fff',
                padding : [29,0,0,-8]
              },
              data: this.options.xData,//传入数据
              axisLabel: {
                  show: true,
                  textStyle: {
                      color: '#fff',
                      fontSize : '12'
                  },
              },
              axisLine : {
                show : true,
                lineStyle : {
                  color : '#0678c6'
                },
              },
              axisTick : {
                show:false,
              }
          },
          yAxis: {
              type: 'value',
              name : '(人次/万)',
              // minInterval : 50,
              nameTextStyle : {
                color : '#fff',
                fontSize : 10,
                padding : [0,0,-4,-32]
              },
              axisLine : {
                show : true,
                lineStyle : {
                  color : '#0678c6'
                },
              },
              axisLabel: {
                show: true,
                textStyle: {
                    color: '#fff',
                    fontSize : '12'
                },
                formatter : function(value){
                  return value / 10000
                }
              },
              axisTick : {
                show:false,
              },
              splitLine : {
                show : true,

                lineStyle : {
                  color : 'rgba(166,166,166,.4)'
                }
              }
          },
          series: [{
              data: this.options.optionData,//传入数据
              type: 'line',
              symbol: 'circle',
              symbolSize: 8,
              symbolKeepAspect : true,
              lineStyle: {
                  normal: {
                      color: '#0678c6',
                      width: 2,
                      type: 'dotted'
                  }
              },
              itemStyle: {
                  normal: {
                      color: '#0678c6'
                  }
              },
              emphasis : {
                itemStyle : {
                  color: '#ff4900',
                  shadowColor: '#ff4900',
                  shadowBlur: 20,
                },
                label : {
                  show : true,
                  color : '#fff',
                  formatter : (value) =>{
                    return formatNum(value.data)
                  }
                }
              }
          }]
      }
    }
  },
  watch : {
    options : {
     handler(newVal, oldVal) {
       // console.log(newVal,oldVal)
      if (this.chart) {
       if (newVal) {
        this.option.xAxis.data = newVal.xData;
        this.option.series[0].data = newVal.optionData;
        this.option.xAxis.axisLabel.interval = newVal.xName === '近30天' ? 4 : 0;
        this.chart.setOption(this.option);
       } else {
        this.chart.setOption(this.option);
       }
      } else {
        this.init();
      }
     },
     deep: true
  }
  },
  methods : {
    init() {
     this.chart = this.$echarts.init(document.getElementById(this.chartId));
     this.chart.setOption(this.option);
     window.addEventListener("resize", this.chart.resize);
    }
  },
  mounted(){
    this.init();
  }
}
</script>

<style lang="scss" scoped>
  .x-bar {
    width: 100%;
    height: 62%;
  }
</style>
